// 渲染地区表
import React, { Component} from 'react'
import { Input, Table } from 'antd'
import './area.css'
import $http from '../../Utils/request'
import storage from '../../Utils/storage'
const { Search } = Input;

//创建请求头文件
let config = {}
if(storage.get("token") !== null){
  config = {
    headers:
      {'Content-Type': 'application/json',
        'token':storage.get("token").data
      }
  }
}else{
  config = {
    headers: {'Content-Type': 'application/json'}
  }
}

export default class AreaTable extends Component{
  state = {
    dataSource : [], // 列表数据源
    areaData: [], // 存放基础数据 不改动
    columns : [
      {
        title: '区域id',
        dataIndex: 'areaId',
        align:'center',
        key: 'areaId',
      },
      {
        title: '区域名称',
        dataIndex: 'fullName',
        align:'center',
        key: 'fullName',
      },
      {
        title: '名称',
        align:'center',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '区域编码',
        align:'center',
        dataIndex: 'areaCode',
        key: 'areaCode',
      },
      {
        title: '父id',
        align:'center',
        dataIndex: 'parentId',
        key: 'parentId',
      },
      {
        title: '区域编号',
        align:'center',
        dataIndex: 'districtnumber',
        key: 'districtnumber',
      },
      {
        title: '创建时间',
        align:'center',
        dataIndex: 'createDate',
        key: 'createDate',
      },
      {
        title: '改动时间',
        align:'center',
        dataIndex: 'modifyDate',
        key: 'modifyDate',
      },
      {
        title: '是否访问',
        align:'center',
        dataIndex: 'isactive',
        key: 'isactive',
        render:function(text){
          if(text === 0){
            return <span style={{backgroundColor:'#dc3545'}}>否</span>
          }else{
            return <span style={{backgroundColor:'#3ed68f'}}>是</span>
          }
        }
      }
    ]
  }

  componentDidMount(){
    $http.get("http://localhost/mall-basic-service/basic/area/queryBasicAreaAll",config).then((response)=>{
      let data = [];
      if(response.data.code === 0){
        for (let i = 0; i < response.data.data.length; i++) {
          data.push(response.data.data[i])
        }
      }
      //数据重组
      this.setState({
        dataSource : data,
        areaData : data
      })
    })
  }

  /**
   * 查询方法
   * @param value
   */
  onSearch = (value) => {
    //获取列表数据
    let areaList = this.state.dataSource;
    //保存原始数据
    let areaData = this.state.areaData;
    //定义一个新的集合用于存放新的数据
    let areaListNew = [];
    if(value.trim() != null && value.trim() !== ""){
      for(let i = 0 ; i < areaList.length ; i ++ ){
        if(areaList[i].fullName.match(value)||
          areaList[i].name.match(value)) {
          areaListNew.push(areaList[i])
        }
      }
    }else{
      areaListNew = areaData
    }
    //重组数据
    this.setState({
      dataSource:areaListNew
    })
  }

  render () {
    return (
      <div className="bodyDiv" style={{width:1150}}>
        <Table
          dataSource={this.state.dataSource}
          columns={this.state.columns}
          scroll={{
            y: 450
          }}
          pagination={{
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/总共 ${total} 条 `,
            showSizeChanger: true,
            defaultPageSize: 10,
            pageSizeOptions: ['10', '20', '30', '50', '100']
          }}
        />
        {/*搜索框*/}
        <div className="areaSearchDiv">
          <Search
            placeholder="请输入区域名称"
            onSearch={this.onSearch}
            style={{
              width: 200,
            }}
          />
        </div>
      </div>
    )
  }
}
